<template>
  <div class="gutter-example">
    <a-row :gutter="24">
      <a-col
        class="gutter-row"
        :span="6"
        v-for="(item, index) in initInfo"
        :key="index"
      >
        <div class="gutter-box" @click="downward(item.mobile)">
          <p class="circleColor"></p>
          <p class="username">{{ item.username }}</p>
          <p>￥{{ item.money }}</p>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  name: "index",
  props: {
    initInfo: {
      type: Array
    },
    paging: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      page: {
        current: 1,
        totalPages: 300
      }
    };
  },
  methods: {
    onChange(current) {
      this.current = current;
    },
    downward(num) {
      this.$commonJs.goPage("inquire", { mobile: num });
    }
  }
};
</script>

<style scoped>
.gutter-example {
  padding-bottom: 30px;
}
.gutter-box {
  width: 325px;
  height: 160px;
  position: relative;
  text-align: center;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
}
.gutter-row:nth-child(4n + 1) > .gutter-box {
  background-color: #95a1fd;
}
.gutter-row:nth-child(4n + 2) > .gutter-box {
  background-color: #cb9cfc;
}
.gutter-row:nth-child(4n + 3) > .gutter-box {
  background-color: #fcbd81;
}
.gutter-row:nth-child(4n + 4) > .gutter-box {
  background-color: #65aafd;
}

.gutter-row {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
.gutter-box > .circleColor {
  width: 84px;
  height: 84px;
  border-radius: 0 0 0 84px;
  position: absolute;
  right: 0;
  top: 0;
}
.gutter-row:nth-child(4n + 1) > .gutter-box > .circleColor {
  background-color: #8f9cff;
}
.gutter-row:nth-child(4n + 2) > .gutter-box > .circleColor {
  background-color: #c796fb;
}
.gutter-row:nth-child(4n + 3) > .gutter-box > .circleColor {
  background-color: #fbb776;
}
.gutter-row:nth-child(4n + 4) > .gutter-box > .circleColor {
  background-color: #76a8fb;
}
.username {
  font-size: 24px;
  color: #ffffff;
  font-weight: bold;
  margin-top: 40px;
  margin-bottom: 32px;
}
.username + p {
  font-size: 30px;
  color: #fefefe;
  font-weight: bold;
}
.paging {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}
</style>
